import React, { useState } from 'react';
import { NumberOutlined, FireFilled, AlignLeftOutlined } from '@ant-design/icons';
import type { MenuProps } from 'antd';
import { Menu } from 'antd';
import { ProFormDateRangePicker } from '@ant-design/pro-components';
import dayjs from 'dayjs';
import { Outlet } from 'react-router-dom';
import DemoColumn from './Top';
import DemoPie from './Method';
import DemoLine from './num';

type MenuItem = Required<MenuProps>['items'][number];

const items: MenuItem[] = [
    {
        label: '兑换量',
        key: '1',
        icon: <NumberOutlined />
    },
    {
        label: '销量Top20',
        key: '2',
        icon: <FireFilled />
    },
    {
        label: '兑换方式',
        key: '3',
        icon: <AlignLeftOutlined />
    },
];

const Echarts: React.FC = () => {
    const [current, setCurrent] = useState('1');

    const onClick: MenuProps['onClick'] = (e) => {
        setCurrent(e.key);
        switch (e.key) {
            case '1':

                break;
            case '2':

                break;
            case '3':

                break;

            default:
                break;
        }
    };

    return (
        <>
            <Menu onClick={onClick} selectedKeys={[current]} mode="horizontal" items={items} />
            <ProFormDateRangePicker fieldProps={{ maxDate: dayjs() }} label='起止时间' />
            {
                current === '1' && <DemoColumn />
            }
            {
                current === '2' && <DemoPie />
            }
            {
                current === '3' && <DemoLine />
            }
        </>
    );
};

export default Echarts;